<template>
  <view class="orderItem" @click="toDetail">
    <view class="timeState">
      <text class="time">货品订单 </text>
      <text class="state"> {{ showState(info.orderState) }} </text>
    </view>
    <u-gap height="2" bg-color="#E9E9E9"></u-gap>
    <view class="contentDiv">
      <image
        class="orderImage"
        :src="getStaticDir('/left.jpg')"
      />
      <view class="orderContent">
        <view class="titleDiv">
          <view class="title" v-if="info.productName">{{ info.productName }} </view>
          <view class="title" v-else>暂无服务项目</view>
          <view class="info" v-if="info.buyerAddress">
            <text class="info-label">×10件</text>
            <!-- <text class="info-text">{{ info.buyerAddress }}</text> -->
          </view>
          <view class="priceDiv">
            <text class="price2">实付</text>
            <text class="price3">￥8880.00</text>
          </view>
        </view>

      </view>
    </view>
    <view
      class="actionDiv"
      :style="{ 'justify-content': info.chatMainId ? 'space-between' : 'flex-end' }"
    >
      <view class="actionChat" v-if="info.chatMainId" @click.stop="toChat(info)">
        <image class="actionImage" src="/static/order/chat.svg" />
        <view class="chatText">群聊</view>
      </view>
      <view class="actionBtns">
        <!-- <template v-if="info.orderState == 'HK_WAITING_PAY'">
          <view class="btn active" @click.stop="toPay">订单支付</view>
        </template>
        <template v-if="info.orderState == 'HK_WAITING_COMMENT'">
          <view class="btn" @click.stop="toAfterSale" v-if="timestamp > 0">发起售后</view>
        </template> -->
        <view class="btn active" v-if="info.orderState == 'HK_WAITING_GRAB'">查看物流</view>
      </view>
    </view>
  </view>
</template>
<script>
// import { staffArrived } from '@/api/order.js';
// import { TOKEN } from '@/config/config';
import moment from 'moment';


export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      timestamp: 0,
      yxInfo: {}
    };
  },
  watch: {
    info: {
      handler(val) {
        console.log(val.orderType);
      },
      immediate: true
    }
  },
  computed: {
    userInfo: {
      get() {
        return this.$store.getters.userInfo;
      },
      set() {}
    }
  },
  created() {

  },
  methods: {
    toDetail() {
      uni.navigateTo({
        url: `/pages/order/orderDetail/orderDetail?orderNo=${this.info.orderNo}`
      });
    },
    toChat({ chatMainId }) {
      console.log('userId', this.userInfo);
      // 根据类型换
      const appSource = 'user';
      uni.webviewTo(
        `/pages/uchat/uchat/?chatId=${chatMainId}&userId=${
          this.userInfo.userId
        }&token=${uni.getStorageSync(TOKEN)}&appSource=${appSource}`
      );
    },
    toPay() {
      // done
      console.log('订单支付');
      uni.navigateTo({
        url: `/pages/order/orderDetail/pay/pay?orderNo=${this.info.orderNo}`
      });
    },
    toAfterSale() {
      // done
      console.log('发起售后');
      uni.navigateTo({
        url: `/pages/order/orderDetail/afterSale/afterSale?orderNo=${this.info.orderNo}`
      });
    },
    showState(type) {
      switch (type) {
        case 'HK_GRAB_CLOSED':
          return '已关闭';
        case 'HK_WAITING_GRAB':
          return '待收货';
        case 'HK_BREAKED':
          return '已终止';
        case 'HK_CANCELED':
          return '已取消';
        case 'HK_IN_AFTER_SALE':
          return '申请售后中';
        case 'HK_DEAL_AFTER_SALE':
          return '售后中';
        case 'HK_COMPELETE_AFTER_SALE':
          return '售后完成';
        case 'HK_REFUSE_AFTER_SALE':
          return '拒绝售后';
        case 'HK_FINISHED':
          return '已完成';
        case 'HK_WAITING_COMMENT':
          return '待评价';
        case 'HK_WAITING_COMPLETE':
          return '待发货';
        case 'HK_WAITING_DISTRIBUTE':
          return '待派工';
        case 'HK_WAITING_PAY':
          return '待付款';
        case 'HK_WAITING_RECEIVE':
          return '待接单';
        default:
          return '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.orderItem {
  background-color: #fff;
  border-radius: 32rpx;
  margin-bottom: 24rpx;
  padding-bottom: 32rpx;
  .timeState {
    display: flex;
    justify-content: space-between;
    padding: 32rpx 24rpx 18rpx;
    .time {
      font-size: 24rpx;
      color: #999999;
    }
    .state {
      font-size: 28rpx;
      color: #ff7209;
    }
  }
  .contentDiv {
    margin-top: 24rpx;
    display: flex;
    padding:0 24rpx;
    .orderImage {
      width: 144rpx;
      height: 144rpx;
      border-radius: 12rpx;
    }
    .orderContent {
      flex: 1;
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;
      .titleDiv {
        display: flex;
        flex-direction: column;
        margin-bottom: 4rpx;
        .titleIcon {
          width: 52rpx;
          height: 28rpx;
          margin-top: 6rpx;
          margin-right: 8rpx;
        }
        .title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
        }
      }
      .info {
        color: #666666;
        font-size: 24rpx;
        margin-top: 6rpx;
        line-height: 34rpx;
        display: flex;
        .info-label {
          white-space: nowrap;
        }
        .info-text {
          white-space: wrap;
        }
      }
      .priceDiv {
        margin-top: 16rpx;
        font-size: 28rpx;
        color: #333333;
        font-weight: bold;
        .price2 {
          font-size: 24rpx;
        }
        .price3 {
          font-size: 32rpx;
        }
      }
    }
  }
  .actionDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    padding: 0 24rpx;
    .actionChat {
      display: flex;
      align-items: center;
      .actionImage {
        width: 40rpx;
        height: 40rpx;
      }
      .chatText {
        margin-left: 4rpx;
        color: #666666;
      }
    }
    .actionBtns {
      position: relative;
      display: flex;
      align-items: center;
      .btn {
        color: #333333;
        margin-left: 16rpx;
        font-size: 24rpx;
        text-align: center;
        line-height: 38rpx;
        background: #ffffff;
        border-radius: 48rpx;
        padding: 8rpx 24rpx;
        border: 2rpx solid #dddddd;
      }
      .active {
        color: #4c71ee;
        border-color: #4c71ee;
      }
    }
  }
}
</style>
